<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../../vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>今天天气真的很{{isHot?"炎热":"寒冷"}}</h2>
      <button v-on:click="changeWeather">改变天气</button>
    </div>
    <script>
      "use strict";
      Vue.config.productionTip = false;

      new Vue({
        el: "#app",
        data() {
          return {
            isHot: true,
            //原则上来说，在data中书写函数，并且是箭头函数，函数内的this是指向当前的vue实例对象
            // 但是一旦写成普通函数，则this指向全局window,严格模式下会指向null，都不是我们想要的
            // 但是我们不会把函数书写在data中，1.必须书写箭头函数，2.函数和数据混杂在一起不容易维护(data就是为了写数据的)
            /* 
                        changeWeather(){
                            console.log(this)
                        }      
                    */
          };
        },
        /* 
                methods选项中用来书写方法，比如事件回调函数，也有我们自己封装的函数等等
                methods中的方法已经被vue统一处理过了，vue控制
                methods中所有的方法的this指向当前的vue实例
                
                为什么要把methods方法的this指向vue实例呢？因为方法一般都是用来操作数据的，而数据都在vue实例上放
                methods中的方法也会全部的放在vue实例上供我们使用
            */
        methods: {
          changeWeather() {
            //console.log(this)
            this.isHot = !this.isHot;
          },
        },
      });
    </script>
  </body>
</html>
